<template>
  <div class="AssistanceSteps-wrap" v-if="isShowAssistanceSteps"  @touchmove.stop.prevent="()=>{}">
    <div class="AssistanceSteps">
      <span class="iconfont iconclose" @click="closeThis"></span>
      <div class="AssistanceSteps-title"></div>
      <h2>邀请好友助力，可立即获得步数</h2>
      <div class="userList">
        <div class="user" v-for="n in 6" :key="n" @click="userList[n-1].id > 0 ? '' : handleClose()">
          <img v-if="userList.length>0 && userList[n-1].id" :src="photoHttp2Https(userList[n-1].head)" alt="">
          <div class="awardSteps" :class="{'special': n % 3 == 0}"><p>奖励{{userList[n-1] ? userList[n-1].steps : 0}}步</p></div>
        </div>
      </div>
      <div class="btn" v-if="!isShowButton(userList)" @click="handleClose">邀请好友助力</div>
      <div class="btn" v-if="isShowButton(userList)">助力已完成</div>
      <p class="tips">邀请新人奖励8000步</p>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
// import {BodyScroll} from '@/tools/utils'
export default {
  data() {
    return {
      
    };
  },
  props: {
    isShowAssistanceSteps: {
      type: Boolean,
      default: false
    },
    userList: {
      type: Array,
      default: []
    }
  },
  methods: {
    handleClose() {
      this.dataCollect('TE_ASSIST_CLICK', '运动赚颜值', {
        ITEM_ID: 1,
        ITEM_NAME: '邀请好友助力'
      })
      this.$emit('invite')
    },
    closeThis () {
      this.$emit('closeAssistanceSteps')
    },
    isShowButton (arr) {
      if (arr.length) {
        let result = arr.filter(val => {
          return val.id > 0
        })
        return result.length >= 6
      } else {
        return false
      }
    }
  }
};
</script>
<style lang="less" scoped>

.AssistanceSteps {
  width: 4.8rem;
  padding: 0.73rem 0.5rem 0.37rem;
  border-radius: 0.2rem;
  background: #fff;
  color: #383838;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  .iconclose{
    position: absolute;
    top: -0.95rem;
    right: 0.1rem;
    font-size: 0.54rem;
    color: #fff;
  }
  .AssistanceSteps-title{
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 4.58rem;
    height: 1.18rem;
    background: url(../../assets/images/AssistanceSteps_title.png) no-repeat;
    background-size: contain;
  }
  >h2{
    font-size: 0.3rem;
    text-align: center;
  }
  .userList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 0.4rem;

    .user{
      position: relative;
      width: 1.2rem;
      height: 1.2rem;
      background: url(../../assets/images/user.png) no-repeat;
      background-size: contain;
      margin-right: 0.58rem;
      margin-bottom: 0.45rem;
      img{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }
      .awardSteps{
        position: absolute;
        bottom: -0.15rem;
        width: 1.2rem;
        height: 0.3rem;
        background: #EF93FD;
        color: #fff;
        line-height: 0.3rem;
        text-align: center;
        border-radius: 0.15rem;
        p{
          font-size: 0.36rem;
          zoom: 0.5;
          // transform: scale(0.5);
          // transform-origin: center;
        }
      }
      .special{
        color: #8B410A;
        background: #FFE738;
      }
    }
    .user:nth-child(3n) {
      margin-right: 0;
    } 
  }
  .btn {
    width: 4rem;
    height: 0.8rem;
    border-radius: 0.37rem;
    background: linear-gradient(0deg, #B141F5 0%, #FCA4FF 100%);
    font-size: 0.3rem;
    text-align: center;
    line-height: 0.8rem;
    color: #fff;
    margin: 0.13rem auto 0;
  }
  .tips{
    font-size: 0.22rem;
    color: #8B410A;
    line-height: 1;
    text-align: center;
    margin-top: 0.18rem;
  }
}
</style>